<!--固件列表-->
<template>
  <div class="firmware-list">
    <div class="header">
      <el-button
        :disabled="rolesCode === 'SALE'"
        type="primary"
        size="14"
        @click="handleAssociatedFirmware">关联固件</el-button>
      <el-button
        :disabled="rolesCode === 'SALE'"
        type="add"
        size="14"
        icon="el-icon-plus"
        @click="handleAddFirmware">新建固件</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#F5F6F7' }"
      size="medium">
      <el-table-column prop="firmwareKey" label="固件Key"> </el-table-column>
      <el-table-column prop="name" label="固件名称"> </el-table-column>
      <el-table-column prop="componentTypeName" label="固件类型"> </el-table-column>
      <el-table-column prop="version" label="固件版本"> </el-table-column>
      <el-table-column prop="state" label="固件版本状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">未上架</span>
          <span v-if="scope.row.state === 1">已上架</span>
          <span v-if="scope.row.state === 2">不存在</span>
        </template>
      </el-table-column>
      <el-table-column prop="customNumber" label="自定义编号"> </el-table-column>
      <el-table-column prop="releaseStatus" label="发布状态">
        <template slot-scope="scope">
          <span v-if="scope.row.releaseStatus">已发布</span>
          <span v-else>未发布</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="版本说明"> </el-table-column>
      <el-table-column prop="fileName" label="文件名称"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="450">
        <template slot-scope="scope">
          <el-button type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleChangeVersion(scope.row)">变更版本</el-button>
          <el-button type="text" :disabled="scope.row.state === 2" size="operate" @click="jumpDetails(scope.row)">详情</el-button>
          <el-button type="text" :disabled="rolesCode === 'SALE' || scope.row.state === 2" size="operate" @click="handleRelease(scope.row)">{{ scope.row.releaseStatus ? '取消发布' : '发布' }}</el-button>
          <el-button type="text" :disabled="rolesCode === 'SALE' || scope.row.state === 2" size="operate" @click="handleTask(scope.row, 1)">测试任务</el-button>
          <el-button type="text" :disabled="rolesCode === 'SALE' || scope.row.state === 2" size="operate" @click="handleTask(scope.row, 2)">升级任务</el-button>
          <el-button type="text" :disabled="rolesCode === 'SALE' || scope.row.state === 2" size="operate" @click="handleUnbind(scope.row)">解除绑定</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
    <addFirmwareDialog
      ref="addFirmware"
      page-type="firmwareDetails"
      @close="handleClose" />
    <associatedFirmwareDialog
      ref="associatedFirmware"
      :product-id="productId"
      :product-name="form.productName"
      :get-firmware-list="getFirmwareList"
      @close="handleClose" />
    <changeVersionDialog
      ref="changeVersion"
      :change-version-rows="changeVersionRows"
      :change-version-key="changeVersionKey"
      :get-firmware-list="getFirmwareList"
      @close="handleClose" />
  </div>
</template>
<script>
import { getProductComponentRelationList, updateProductComponentReleaseStatus, unbindComponent } from "@/api/product/firmware"
import store from '@/store'
import { mapGetters } from 'vuex'
import addFirmwareDialog from './addFirmwareDialog.vue'
import associatedFirmwareDialog from './associatedFirmwareDialog.vue'
import changeVersionDialog from './changeVersionDialog.vue'
export default {
  name: "firmware",
  components: { addFirmwareDialog, associatedFirmwareDialog, changeVersionDialog },
  data() {
    return {
      loading: true,
      tableData: [], // 表格数据
      dialogVisible: false,
      form: {
        name: "", // 固件名称
        timeoutTime: '', // 超时总时长
        singleTimeout: '', // 单次超时时长
        description: '', // 日志
        productId: '', // 产品id
        productName: '' // 产品名字
      },
      // rules: {
      //   package: { required: true, validator: validatePackage, trigger: 'blur' },
      //   name: [
      //     { required: true, message: '请输入固件名称', trigger: 'blur' },
      //     { min: 2, max: 32, message: '请输入规范的固件名称', trigger: 'blur' },
      //     { validator: this.validateName, trigger: 'blur' }
      //   ],
      //   timeoutTime: [
      //     { required: true, message: "请输入超时时间", trigger: "blur" },
      //     {},
      //     { validator: this.validateTimeoutTime, trigger: 'blur' }
      //   ],
      //   singleTimeout: [
      //     { required: true, message: "请输入超时时间", trigger: "blur" },
      //     {},
      //     { validator: this.validateTimeoutTime, trigger: 'blur' }
      //   ],
      //   description: [{ required: true, message: "请输入更新日志", trigger: "blur" }]
      // },
      productId: "", // 当前产品id
      stateList: [
        // 状态
        { value: 0, label: "开发中" },
        { value: 1, label: "已上线" }
      ],
      current: 1, // 当前页面
      size: 10, // 一页展示多少条
      total: 0, // 总条数
      fileList: [], // 上传的固件文件
      uploadSuccessOrError: false, // 上传固件成功则展示固件基本信息否则不展示
      firmwarePackage: "", // 上传成功的固件包信息
      uploadLoading: '', // 上传固件弹窗的loading
      uploadPercentage: 0, // 上传进度百分比
      isUploading: false, // 是否正在上传
      changeVersionRows: {}, // 变更版本行数据
      changeVersionKey: 0, // 变更版本key
      headerObj: {
        'TENANT-ID': store.getters.userInfo.tenantId,
        Authorization: 'Bearer ' + store.getters.access_token
      }
    }
  },
  computed: {
    ...mapGetters(['rolesCode'])
  },
  created() { },
  mounted() {
    this.productId = this.$route.query.productId
    this.form.productName = this.$route.query.productName
    this.form.productId = this.$route.query.productId
    this.getFirmwareList()
  },
  methods: {
    // 固件名称校验
    validateName(rule, value, callback) {
      const flag = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]+$/).test(value)
      if (!flag) {
        callback(new Error('请输入规范的固件名称'))
      } else {
        callback()
      }
    },
    // 超时时长校验
    validateTimeoutTime(rule, value, callback) {
      const flag = new RegExp(/^(?:1[01]?[0-9]|120|[1-9][0-9]?)$/).test(value)
      if (!flag) {
        callback(new Error('请输入规范的超时时长'))
      } else {
        callback()
      }
    },
    // 固件列表
    getFirmwareList() {
      this.loading = true
      var params = {
        productId: this.productId,
        size: this.size,
        current: this.current
      }
      getProductComponentRelationList(params).then((res) => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 关联固件
    handleAssociatedFirmware() {
      this.$refs.associatedFirmware.associatedDialogVisible = true
    },
    // 新建固件
    handleAddFirmware() {
      this.$refs.addFirmware.dialogVisible = true
    },
    // 变更版本
    handleChangeVersion(row) {
      this.changeVersionRows = row
      this.changeVersionKey += 1
      this.$refs.changeVersion.changeVersionDialogVisible = true
    },
    // 跳转详情
    jumpDetails(row) {
      this.$router.push({
        path: "/product/product-details/firmware/firmwareDetails/firmwareDetails",
        query: {
          componentInfoId: row.componentId,
          version: row.version,
          rowsData: JSON.stringify(row)
        }
      })
    },
    // 测试任务/升级任务
    handleTask(row, type) {
      this.$router.push({
        path: "/product/product-details/firmware/taskList/task",
        query: {
          taskType: type,
          firmwareId: row.firmwareId,
          id: row.id,
          version: row.version,
          productName: this.form.productName,
          state: row.state
        }
      })
    },
    // 更新固件发布状态
    handleRelease(row) {
      var params = {
        productComponentRelationId: row.id,
        releaseStatus: !row.releaseStatus
      }
      updateProductComponentReleaseStatus(params).then((res) => {
        this.getFirmwareList()
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 解除绑定
    handleUnbind(row) {
      var params = {
        productComponentRelationId: row.id
      }
      unbindComponent(params).then((res) => {
        this.getFirmwareList()
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 新建固件弹窗关闭
    handleClose() {
      this.dialogVisible = false
      this.$refs['form'].resetFields()
      this.fileList = []
      this.uploadSuccessOrError = false
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.size = val
      this.getFirmwareList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.current = val
      // this.submitForm('form')
      this.getFirmwareList()
    },
    // 状态格式化
    statusFormatter(val) {
      const label = this.stateList.find((option) => option.value === val.state).label || "-"
      return label
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addFirmwareFun()
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  // display: flex;
  // justify-content: space-between;
  // align-items: left;
  float: right;
  margin-bottom: 15px;
}

::v-deep .upload-demo {
  .el-upload {
    width: 100%;
  }

  .el-button {
    width: 100%;
    color: #275fe8;
    font-size: 14px;
  }
}

.el-upload__tip {
  float: right;
  margin: 0px;
  line-height: 20px;
  color: #808080;
}

.uploadInfo {
  text-align: left;
  background: #f7f7f9;
  padding-left: 10px;
  margin: 4px 0 0 -100px;

  .el-row {
    padding-left: 10px;

    .el-col {
      margin: 0px;
    }
  }

  .infoTitle {
    font-size: 14px;
    color: #808080;
  }

  .infoVal {
    color: #252525;
  }
}

::v-deep .el-textarea .el-input__count {
  background: transparent;
  right: 20px;
  bottom: 0;
}

::v-deep .el-upload-list {
  display: none;
}

::v-deep .el-dialog__body {
  padding: 40px 58px 36px 50px;
}

::v-deep .el-form-item__label {
  color: #808080;
}

::v-deep .firmwareName .el-input__inner {
  color: #275fe8;
}

::v-deep .el-input-group__append {
  background-color: #ffffff;
  color: #808080;
}

::v-deep .el-button+.el-button {
  margin-left: 16px;
}

::v-deep .name-input .el-input__inner {
  padding-left: 15px;
  padding-right: 48px;
  background: transparent;
}

::v-deep .el-table__fixed-right-patch {
  background-color: #F5F6F7;
}
</style>
